<template>
  <div class="address_container">
    <div class="status" v-if="_type != -1">
      <div class="std">
        <span>待付款</span>
        <span>待发货</span>
        <span>待收货</span>
        <span>待评价</span>
        <span>已完成</span>
      </div>
      <div class="sdd">
        <div class="sdd_item active"><span class="dot"></span></div>
        <div :class="['sdd_item',_type == 1 ? 'active dd':'']">
          <span class="line"></span><span class="dot"></span>
        </div>
        <div :class="['sdd_item',_type == 2 ? 'active dd':'']"
        
        >
          <span class="line"></span><span class="dot"></span>
        </div>
        <div :class="['sdd_item',_type == 3 ? 'active dd':'']">
          <span class="line"></span><span class="dot"></span>
        </div>
        <div :class="['sdd_item',_type == 4 ? 'active dd':'']">
          <span class="line"></span><span class="dot"></span>
        </div>
      </div>
    </div>
    <div class="address">
      <div class="ad_td">
          <span class="name">{{user.real_name}}</span>
          <span class="phone">{{user.user_phone}}</span>
      </div>
      <div class="ad_dd">
        {{user.user_address}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        user:{
            type:Object
        },
        _type:{
          type:Number
        }
    }
    
};
</script>

<style lang="scss" scoped>
.address_container {
    background-color: #fff;
  .status {
    padding: 10px 15px;
    .std {
      color: #282828;
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      span{
          
          text-align: center;
      }
    }

    .sdd{
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        .sdd_item{
            display: flex;
            align-items: center;
            
            .dot{
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background-color: #999;
            }
            .line{
                width: 60px;
                height: 1px;
                background-color: #999;
                margin: 0 5px;
            }
        }

        .sdd_item.active{
            .dot{
                
                background-color: #fc4141;
            }

            .line{
                background-color: #fc4141;
            }
        }

        .sdd_item.active.dd{
            .dot{
                
                transform:scale(1.8);
            }
        }
    }
  }

  .address{
    padding: 15px 15px 15px;
    .ad_td{
        color: #282828;
        font-size: 15px;
        .name{
            margin-right: 25px;
        }
    }
    .ad_dd{margin-top: 3px;
        color: #999;
        font-size: 15px;
        
    }
  }
}
</style>

